<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
    <link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
    <link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
    <link href="stable/static/css/api.css" rel="stylesheet" type="text/css">
    <title>chrome.storage - chrome插件中文开发文档(非官方)</title>
  </head>
  <body>
    <a id="top"></a>
    <div id="header">{Header content}</div>
    <a id="gc-topnav-anchor"></a>
    <div id="gc-topnav">
      <h1>Google Chrome Extensions</h1>
      <ul id="home" class="gc-topnav-tabs">
        <li id="home_link">
          <a href="index.html" title="Google Chrome Extensions home page"><div>Home</div></a>
        </li>
        <li id="docs_link">
          <a href="docs.html" title="Official Google Chrome Extensions documentation"><div>Docs</div></a>
        </li>
        <li id="faq_link">
          <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>FAQ</div></a>
        </li>
        <li id="samples_link">
          <a href="samples.html" title="Sample Extensions (with source code)"><div>Samples</div></a>
        </li>
        <li id="group_link">
          <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>Group</div></a>
        </li>
        <li id="so_link">
          <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>Questions?</div></a>
        </li>
      </ul>
    </div>
    <div id="gc-container">
      <div id="gc-sidebar">
        <ul 
            class="level1 ">
          <li class="level2">
                <a href="getstarted.html" class="level2 ">Getting Started</a>
          </li>
          <li class="level2">
                <a href="overview.html" class="level2 ">Overview</a>
          </li>
          <li class="level2">
                <a href="whats_new.html" class="level2 ">What's New?</a>
          </li>
          <li class="level2">
                <a href="devguide.html" class="level2 ">Developer's Guide</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Browser UI</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="browserAction.html" class="level4 ">Browser Actions</a>
                      </li>
                      <li class="level4">
                            <a href="contextMenus.html" class="level4 ">Context Menus</a>
                      </li>
                      <li class="level4">
                            <a href="notifications.html" class="level4 ">Desktop Notifications</a>
                      </li>
                      <li class="level4">
                            <a href="omnibox.html" class="level4 ">Omnibox</a>
                      </li>
                      <li class="level4">
                            <a href="options.html" class="level4 ">Options Pages</a>
                      </li>
                      <li class="level4">
                            <a href="override.html" class="level4 ">Override Pages</a>
                      </li>
                      <li class="level4">
                            <a href="pageAction.html" class="level4 ">Page Actions</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Browser Interaction</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="bookmarks.html" class="level4 ">Bookmarks</a>
                      </li>
                      <li class="level4">
                            <a href="cookies.html" class="level4 ">Cookies</a>
                      </li>
                      <li class="level4">
                            <a href="devtools.html" class="level4 ">Developer Tools</a>
                      </li>
                      <li class="level4">
                            <a href="events.html" class="level4 ">Events</a>
                      </li>
                      <li class="level4">
                            <a href="history.html" class="level4 ">History</a>
                      </li>
                      <li class="level4">
                            <a href="management.html" class="level4 ">Management</a>
                      </li>
                      <li class="level4">
                            <a href="tabs.html" class="level4 ">Tabs</a>
                      </li>
                      <li class="level4">
                            <a href="windows.html" class="level4 ">Windows</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Implementation</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="a11y.html" class="level4 ">Accessibility</a>
                      </li>
                      <li class="level4">
                            <a href="event_pages.html" class="level4 ">Event Pages</a>
                      </li>
                      <li class="level4">
                            <a href="contentSecurityPolicy.html" class="level4 ">Content Security Policy</a>
                      </li>
                      <li class="level4">
                            <a href="content_scripts.html" class="level4 ">Content Scripts</a>
                      </li>
                      <li class="level4">
                            <a href="xhr.html" class="level4 ">Cross-Origin XHR</a>
                      </li>
                      <li class="level4">
                            <a href="i18n.html" class="level4 ">Internationalization</a>
                      </li>
                      <li class="level4">
                            <a href="messaging.html" class="level4 ">Message Passing</a>
                      </li>
                      <li class="level4">
                            <a href="permissions.html" class="level4 ">Optional Permissions</a>
                      </li>
                      <li class="level4">
                            <a href="npapi.html" class="level4 ">NPAPI Plugins</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Finishing</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="hosting.html" class="level4 ">Hosting</a>
                      </li>
                      <li class="level4">
                            <a href="external_extensions.html" class="level4 ">Other Deployment Options</a>
                      </li>
                    </ul>
                </li>
              </ul>
          </li>
          <li class="level2">
                <a href="tutorials.html" class="level2 ">Tutorials</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="tut_migration_to_manifest_v2.html" class="level3 ">Manifest V2</a>
                </li>
                <li class="level3">
                      <a href="tut_debugging.html" class="level3 ">Debugging</a>
                </li>
                <li class="level3">
                      <a href="tut_analytics.html" class="level3 ">Google Analytics</a>
                </li>
                <li class="level3">
                      <a href="tut_oauth.html" class="level3 ">OAuth</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">Reference</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Formats</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="manifest.html" class="level4 ">Manifest Files</a>
                      </li>
                      <li class="level4">
                            <a href="match_patterns.html" class="level4 ">Match Patterns</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                      <a href="permission_warnings.html" class="level3 ">Permission Warnings</a>
                </li>
                <li class="level3">
                      <a href="api_index.html" class="level3 ">chrome.* APIs</a>
                </li>
                <li class="level3">
                      <a href="api_other.html" class="level3 ">Other APIs</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">More</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">Chrome Web Store</a>
                </li>
                <li class="level3">
                      <a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">Hosted Apps</a>
                </li>
                <li class="level3">
                      <a href="themes.html" class="level3 ">Themes</a>
                </li>
              </ul>
          </li>
        </ul>
      </div>
      <div id="gc-pagecontent">
        <h1 class="page_title">chrome.storage</h1>
        
        
        
        <div id="toc">
          <h2>Contents</h2>
          <ol>
            <li>
              <a href=#manifest>Manifest</a>
            </li>
            <li>
              <a href=#using-sync>Usage</a>
            </li>
            <li>
              <a href=#limits>Storage and throttling limits</a>
            </li>
            <li>
              <a href=#examples>Examples</a>
            </li>
            <li>
              <a href="#apiReference">API reference: chrome.storage</a>
              <ol>
                  <li><a href="#types">Types</a><ol>  <li>    <a href="#type-StorageChange">StorageChange</a>  </li>  <li>    <a href="#type-StorageArea">StorageArea</a><ol><li>      <a href="#StorageArea-methods">Methods</a>      <ol>        <li><a href="#method-StorageArea-get">get</a></li>        <li><a href="#method-StorageArea-getBytesInUse">getBytesInUse</a></li>        <li><a href="#method-StorageArea-set">set</a></li>        <li><a href="#method-StorageArea-remove">remove</a></li>        <li><a href="#method-StorageArea-clear">clear</a></li>      </ol>    </li></ol>  </li></ol></li>
                  <li><a href="#properties">Properties</a><ol>  <li>    <a href="#property-sync">sync</a><ol><li>      <a href="#sync-properties">Properties</a>      <ol>        <li>          <a href="#property-sync-QUOTA_BYTES">QUOTA_BYTES</a>        </li>        <li>          <a href="#property-sync-QUOTA_BYTES_PER_ITEM">QUOTA_BYTES_PER_ITEM</a>        </li>        <li>          <a href="#property-sync-MAX_ITEMS">MAX_ITEMS</a>        </li>        <li>          <a href="#property-sync-MAX_WRITE_OPERATIONS_PER_HOUR">MAX_WRITE_OPERATIONS_PER_HOUR</a>        </li>        <li>          <a href="#property-sync-MAX_SUSTAINED_WRITE_OPERATIONS_PER_MINUTE">MAX_SUSTAINED_WRITE_OPERATIONS_PER_MINUTE</a>        </li>      </ol>    </li></ol>  </li>  <li>    <a href="#property-local">local</a><ol><li>      <a href="#local-properties">Properties</a>      <ol>        <li>          <a href="#property-local-QUOTA_BYTES">QUOTA_BYTES</a>        </li>      </ol>    </li></ol>  </li></ol></li>
                  
                  <li><a href="#events">Events</a><ol>  <li><a href="#event-onChanged">onChanged</a></li></ol></li>
                  <li><a href="#samples">Sample Extensions</a></li>
              </ol>
            </li>
          </ol>
        </div>

<p id="classSummary">
Use the <code>chrome.storage</code> module
to store, retrieve, and track changes to user data.
This API has been optimized
to meet the specific storage needs of extensions.
It provides the same storage capabilities as the
<a href="https://developer.mozilla.org/en/DOM/Storage#localStorage">localStorage API</a>
with the following key differences:
</p>

<ul>
  <li>User data can be automatically synced with Chrome sync
  (using <code>storage.sync</code>).</li>
  <li>Your extension's content scripts can directly access user data
  without the need for a background page.</li>
  <li>A user's extension settings can be persisted
  even when using
  <a href="manifest.html#incognito">split incognito behavior</a>.</li>
  <li>User data can be stored as objects
  (the <code>localStorage API</code> stores data in strings).</li>
</ul>

<h2 id="manifest">Manifest</h2>
<p>You must declare the "storage" permission in the <a
  href="manifest.html">extension manifest</a>
  to use the storage API.
  For example:</p>
<pre>{
  "name": "My extension",
  ...
  <b>"permissions": [
    "storage"
  ]</b>,
  ...
}</pre>

<h2 id="using-sync">Usage</h2>

<p>
To store user data for your extension,
you can use either
<code>storage.sync</code> or
<code>storage.local</code>.
When using <code>storage.sync</code>,
the stored data will automatically be synced
to any Chrome browser that the user is logged into,
provided the user has sync enabled.
</p>

<p>
When Chrome is offline,
Chrome stores the data locally.
The next time the browser is online,
Chrome syncs the data.
Even if a user disables syncing,
<code>storage.sync</code> will still work.
In this case, it will behave identically
to <code>storage.local</code>.
</p>

<p class="warning">
Confidential user information should not be stored!
The storage area isn't encrypted.
</p>

<h2 id="limits">Storage and throttling limits</h2>

<p><code>chrome.storage</code> is not a big truck.
It's a series of tubes.
And if you don't understand,
those tubes can be filled,
and if they are filled
when you put your message in,
it gets in line,
and it's going to be delayed
by anyone that puts into that tube
enormous amounts of material.

<p>For details on the current limits
of the storage API, and what happens
when those limits are exceeded, please
see the <a href="#apiReference">API reference</a>.


<h2 id="examples">Examples</h2>

<p>
The following example checks for
CSS code saved by a user on a form,
and if found,
stores it.
</p>

<pre>
function saveChanges() {
  // Get a value saved in a form.
  var theValue = textarea.value;
  // Check that there's some code there.
  if (!theValue) {
    message('Error: No value specified');
    return;
  }
  // Save it using the Chrome extension storage API.
  chrome.storage.sync.set({'value': theValue}, function() {
    // Notify that we saved.
    message('Settings saved');
  });
}
</pre>

<p>
If you're interested in tracking changes made
to a data object,
you can add a listener
to its <code>onChanged</code> event.
Whenever anything changes in storage,
that event fires.
Here's sample code
to listen for saved changes:
</p>

<pre>
chrome.storage.onChanged.addListener(function(changes, namespace) {
  for (key in changes) {
    var storageChange = changes[key];
    console.log('Storage key "%s" in namespace "%s" changed. ' +
                'Old value was "%s", new value is "%s".',
                key,
                namespace,
                storageChange.oldValue,
                storageChange.newValue);
  }
});
</pre>

<p>
You can find examples that use this API on the
<a href="samples.html#sty">Samples page</a>.
</p>
        <h2 id="apiReference">API Reference: chrome.storage</h2>
        <div class="api_reference">
            <h3 id="types">Types</h3>
              <div>
                <h3 id="type-StorageChange">StorageChange</h3>
                <div>
                  <dt><span class="type_name">  (    <span id="typeTemplate">object</span>  )</span></dt>
                  <h4 id="StorageChange-properties">
                    Properties of <a href="#type-StorageChange">StorageChange</a>
                  </h4>
                  <dd><dl>      <div>
                      <a name="property-StorageChange-oldValue"></a>
                      <dt>
                        <span class="variable">oldValue</span>
                        <span class="property">
                          (
                            <span class="optional">optional</span>
                            <span id="typeTemplate">any</span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The old value of the item, if there was an old value.
                      </dd>
                    </div>
                    <div>
                      <a name="property-StorageChange-newValue"></a>
                      <dt>
                        <span class="variable">newValue</span>
                        <span class="property">
                          (
                            <span class="optional">optional</span>
                            <span id="typeTemplate">any</span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The new value of the item, if there is a new value.
                      </dd>
                    </div>
              </dl></dd>
                </div>
              </div>
              <div>
                <h3 id="type-StorageArea">StorageArea</h3>
                <div>
                  <dt><span class="type_name">  (    <span id="typeTemplate">object</span>  )</span></dt>
                  <h4 id="StorageArea-methods">
                    Methods of <a href="#type-StorageArea">StorageArea</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="method-StorageArea-get">get</h4>
                      <div class="summary lower">
                        <span>StorageArea.get</span>(<span class="optional">array of string or string or object <span class="variable">keys</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Gets one or more items from storage.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-get-keys"></a>  <dt>    <span class="variable">keys</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">array of string or string or object</span>      )    </span>  </dt>  <dd>    A single key to get, list of keys to get, or a dictionary specifying default values (see description of the object).  An empty list or object will return an empty result object.  Pass in <code>null</code> to get the entire contents of storage.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      The <em>callback</em> parameter should specify a function      that looks like this:</p><pre>function(object items) <span class="subdued">{...}</span>;</pre><dl>  <div>  <a name="property-callback-items"></a>  <dt>    <span class="variable">items</span>    <span class="property">      (                <span id="typeTemplate">object</span>      )    </span>  </dt>  <dd>    Object with items in their key-value mappings.  </dd></div></dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="method-StorageArea-getBytesInUse">getBytesInUse</h4>
                      <div class="summary lower">
                        <span>StorageArea.getBytesInUse</span>(<span class="optional">array of string or string <span class="variable">keys</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Gets the amount of space (in bytes) being used by one or more items.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-getBytesInUse-keys"></a>  <dt>    <span class="variable">keys</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">array of string or string</span>      )    </span>  </dt>  <dd>    A single key or list of keys to get the total usage for. An empty list will return 0. Pass in <code>null</code> to get the total usage of all of storage.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      The <em>callback</em> parameter should specify a function      that looks like this:</p><pre>function(integer bytesInUse) <span class="subdued">{...}</span>;</pre><dl>  <div>  <a name="property-callback-bytesInUse"></a>  <dt>    <span class="variable">bytesInUse</span>    <span class="property">      (                <span id="typeTemplate">integer</span>      )    </span>  </dt>  <dd>    Amount of space being used in storage, in bytes.  </dd></div></dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="method-StorageArea-set">set</h4>
                      <div class="summary lower">
                        <span>StorageArea.set</span>(<span>object <span class="variable">items</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Sets multiple items.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-set-items"></a>  <dt>    <span class="variable">items</span>    <span class="property">      (                <span id="typeTemplate">object</span>      )    </span>  </dt>  <dd>    Object specifying items to augment storage with. Values that cannot be serialized (functions, etc) will be ignored.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      If you specify the <em>callback</em> parameter, it should      specify a function that looks like this:</p><pre>function() <span class="subdued">{...}</span>;</pre><dl>  </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="method-StorageArea-remove">remove</h4>
                      <div class="summary lower">
                        <span>StorageArea.remove</span>(<span>array of string or string <span class="variable">keys</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Removes one or more items from storage.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-remove-keys"></a>  <dt>    <span class="variable">keys</span>    <span class="property">      (                <span id="typeTemplate">array of string or string</span>      )    </span>  </dt>  <dd>    A single key or a list of keys for items to remove.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      If you specify the <em>callback</em> parameter, it should      specify a function that looks like this:</p><pre>function() <span class="subdued">{...}</span>;</pre><dl>  </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="method-StorageArea-clear">clear</h4>
                      <div class="summary lower">
                        <span>StorageArea.clear</span>()
                      </div>
                      <div class="description">
                    <p>
                          Removes all items from storage.
                        </p>  </div>
                    </div>
              </dl></dd>
                </div>
              </div>
            <h3 id="properties">Properties</h3>
              <div>
                <h3 id="property-sync">sync</h3>
                <div class="summary">
                  <span>chrome.storage.sync</span>
                </div>
                <div>
                  <dt><span class="property">sync</span> <span class="type_name">  (    <span id="typeTemplate"><a href="storage.html#type-StorageArea">StorageArea</a></span>  )</span></dt>
              <dd>
                    Items under the "sync" storage area are synced using Chrome Sync.
                  </dd>    <h4 id="sync-properties">
                    Properties of <a href="#property-sync">sync</a>
                  </h4>
                  <dd><dl>      <div>
                      <a name="property-sync-QUOTA_BYTES"></a>
                      <dt>
                        <span class="variable">QUOTA_BYTES</span>
                        <span class="property">
                          (
                            
                            <span id="typeTemplate"><code>102,400</code></span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The maximum total amount (in bytes) of data that can be stored in sync storage, as measured by the JSON stringification of every value plus every key's length. Updates that would cause this limit to be exceeded fail immediately and set <a href='runtime.html#property-lastError'>chrome.runtime.lastError</a>.
                      </dd>
                    </div>
                    <div>
                      <a name="property-sync-QUOTA_BYTES_PER_ITEM"></a>
                      <dt>
                        <span class="variable">QUOTA_BYTES_PER_ITEM</span>
                        <span class="property">
                          (
                            
                            <span id="typeTemplate"><code>4,096</code></span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The maximum size (in bytes) of each individual item in sync storage, as measured by the JSON stringification of its value plus its key length. Updates containing items larger than this limit will fail immediately and set <a href='runtime.html#property-lastError'>chrome.runtime.lastError</a>.
                      </dd>
                    </div>
                    <div>
                      <a name="property-sync-MAX_ITEMS"></a>
                      <dt>
                        <span class="variable">MAX_ITEMS</span>
                        <span class="property">
                          (
                            
                            <span id="typeTemplate"><code>512</code></span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The maximum number of items that can be stored in sync storage. Updates that would cause this limit to be exceeded will fail immediately and set <a href='runtime.html#property-lastError'>chrome.runtime.lastError</a>.
                      </dd>
                    </div>
                    <div>
                      <a name="property-sync-MAX_WRITE_OPERATIONS_PER_HOUR"></a>
                      <dt>
                        <span class="variable">MAX_WRITE_OPERATIONS_PER_HOUR</span>
                        <span class="property">
                          (
                            
                            <span id="typeTemplate"><code>1,000</code></span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The maximum number of <code>set</code>, <code>remove</code>, or <code>clear</code> operations that can be performed each hour. Updates that would cause this limit to be exceeded fail immediately and set <a href='runtime.html#property-lastError'>chrome.runtime.lastError</a>.
                      </dd>
                    </div>
                    <div>
                      <a name="property-sync-MAX_SUSTAINED_WRITE_OPERATIONS_PER_MINUTE"></a>
                      <dt>
                        <span class="variable">MAX_SUSTAINED_WRITE_OPERATIONS_PER_MINUTE</span>
                        <span class="property">
                          (
                            
                            <span id="typeTemplate"><code>10</code></span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The maximum number of <code>set</code>, <code>remove</code>, or <code>clear</code> operations that can be performed each minute, sustained over 10 minutes. Updates that would cause this limit to be exceeded fail immediately and set <a href='runtime.html#property-lastError'>chrome.runtime.lastError</a>.
                      </dd>
                    </div>
              </dl></dd>
                </div>
              </div>
              <div>
                <h3 id="property-local">local</h3>
                <div class="summary">
                  <span>chrome.storage.local</span>
                </div>
                <div>
                  <dt><span class="property">local</span> <span class="type_name">  (    <span id="typeTemplate"><a href="storage.html#type-StorageArea">StorageArea</a></span>  )</span></dt>
              <dd>
                    Items under the "local" storage area are local to each machine.
                  </dd>    <h4 id="local-properties">
                    Properties of <a href="#property-local">local</a>
                  </h4>
                  <dd><dl>      <div>
                      <a name="property-local-QUOTA_BYTES"></a>
                      <dt>
                        <span class="variable">QUOTA_BYTES</span>
                        <span class="property">
                          (
                            
                            <span id="typeTemplate"><code>5,242,880</code></span>
                          )
                        </span>
                      </dt>
                      <dd>
                        The maximum amount (in bytes) of data that can be stored in local storage, as measured by the JSON stringification of every value plus every key's length. This value will be ignored if the extension has the <code>unlimitedStorage</code> permission. Updates that would cause this limit to be exceeded fail immediately and set <a href='runtime.html#property-lastError'>chrome.runtime.lastError</a>.
                      </dd>
                    </div>
              </dl></dd>
                </div>
              </div>
            <h3 id="events">Events</h3>
              <div>
                <h4 id="event-onChanged">onChanged</h4>
                <div class="summary">
                  <span class="subdued">chrome.storage.</span>onChanged<span class="subdued">.addListener</span>(function(<span>object <span class="variable">changes</span></span>, <span>string <span class="variable">areaName</span></span>)<span class="subdued"> {...}</span>);
                </div>
                <div class="description">
              <p>
                    Fired when one or more items change.
                  </p>      <h4>Listener Parameters</h4>
                    <dl>
                      <div>  <a name="property-onChanged-changes"></a>  <dt>    <span class="variable">changes</span>    <span class="property">      (                <span id="typeTemplate">object</span>      )    </span>  </dt>  <dd>    Object mapping each key that changed to its corresponding <a href='#type-StorageChange'>StorageChange</a> for that item.  </dd></div><div>  <a name="property-onChanged-areaName"></a>  <dt>    <span class="variable">areaName</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    The name of the storage area ("sync" or "local") the changes are for.  </dd></div>
                    </dl>
                </div>
              </div>
        </div>
          <h2 id="samples">Sample Extensions that use chrome.storage</h2>
            <li><strong><a href="samples.html#3680ae406d5eb5fd580b19a93b88b6bf">Stylizr</a></strong> &ndash;
            Spruce up your pages with custom CSS.
        </li>
            <li><strong><a href="samples.html#0837f59976e148ed9922266e1de6c29f">WebNavigation Tech Demo</a></strong> &ndash;
            Demonstration of the WebNavigation extension API.
        </li>
      </div>
    </div>
  </body>
  <script>
    window.bootstrap = {
      api_names: [{"name":"alarms"},{"name":"bookmarks"},{"name":"browserAction"},{"name":"browsingData"},{"name":"commands"},{"name":"contentSettings"},{"name":"contextMenus"},{"name":"cookies"},{"name":"debugger"},{"name":"declarativeWebRequest"},{"name":"devtools.inspectedWindow"},{"name":"devtools.network"},{"name":"devtools.panels"},{"name":"downloads"},{"name":"events"},{"name":"extension"},{"name":"fileBrowserHandler"},{"name":"fontSettings"},{"name":"history"},{"name":"i18n"},{"name":"idle"},{"name":"input.ime"},{"name":"management"},{"name":"omnibox"},{"name":"pageAction"},{"name":"pageCapture"},{"name":"permissions"},{"name":"privacy"},{"name":"proxy"},{"name":"runtime"},{"name":"scriptBadge"},{"name":"storage"},{"name":"tabs"},{"name":"topSites"},{"name":"tts"},{"name":"ttsEngine"},{"name":"types"},{"name":"webNavigation"},{"name":"webRequest"},{"name":"webstore"},{"last":true,"name":"windows"}].concat(
          [{"name":"experimental.bluetooth"},{"name":"experimental.devtools.audits"},{"name":"experimental.devtools.console"},{"name":"experimental.discovery"},{"name":"experimental.identity"},{"name":"experimental.infobars"},{"name":"experimental.offscreenTabs"},{"name":"experimental.processes"},{"name":"experimental.record"},{"name":"experimental.speechInput"},{"name":"experimental.systemInfo.cpu"},{"name":"experimental.systemInfo.storage"},{"last":true,"name":"experimental.usb"}]),
      branchInfo: {"channels":[{"path":"stable","name":"Stable"},{"path":"dev","name":"Dev"},{"path":"beta","name":"Beta"},{"path":"trunk","name":"Trunk"}],"current":"stable","showWarning":false}
    };
  </script>
  <div id="gc-footer">
    <div class="text">
      <p>
        Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
        the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
        Attribution 3.0 License</a>, and code samples are licensed under the
        <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
      </p>
      <p>
        ©2012 Google
      </p>
      <script src="stable/static/js/branch.js" type="text/javascript"></script>
      <script src="stable/static/js/sidebar.js" type="text/javascript"></script>
      <script src="stable/static/js/prettify.js" type="text/javascript"></script>
      <script>
        (function() {
          // Auto syntax highlight all pre tags.
          var preElements = document.getElementsByTagName('pre');
          for (var i = 0; i < preElements.length; i++)
            preElements[i].classList.add('prettyprint');
          prettyPrint();
        })();
      </script>
      <div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>
  
    </div>
  </div>
</html>
